HTML i XHTML


Dynamiczne menu

Na pewno udało Ci się już takie zauważyć na innych stronach. Klikasz w rozwijaną listę typu "select" i wybierasz daną opcję - następnie przenosi Cię do wybranego działu. W bardzo prosty sposób możesz zamieścić coś takiego na własnej stronie.

Poniżej zobaczysz dwa rodzaje realizacji takiego menu. Pierwsze będzie przypominało standardowy formularz z przyciskiem, drugie natomiast będzie przenosić do wybranego miejsca przez sam wybór opcji...

Wersja z przyciskiem

<form action="sciezka_do_pliku.html" method="post">
  <select name="my_newsletter" id="my_newsletter">
    <option value="in">Zapisz</option>
    <option value="out">Wypisz</option>
  </select>

  <input type="submit" value="Przenieś" >
</form>

W ten oto sposób można przekierować gościa np. na stronę z dalszymi instrukcjami odnośnie wpisywania / wypisania z newslettera. Powyższa instrukcja wymaga od gościa naciśnięcia przycisku, aby akcja została wykonana. Za pomocą JavaScript możemy wykonać to samo bez przycisku...

Wersja bez przycisku

<form>
  <select onchange="self.location.href = this.value">
    <option>MENU</option>
    <option value="http://computersun.pl"> - News </option>
    <option value="http://computersun.pl/bios/"> - BIOS</option>
  </select>
</form>

Jeśli używasz ramek zamień "this.value" na "parent.nazwa_ramki"!

W ten sposób po naciśnięciu na daną opcję zostajemy przeniesieni na odpowiednią (pod)stronę. Takie dodatkowe menu z pewnością pomoże Ci urozmaicić witrynę.

Dodał: Paweł​Dzedzej
Dział: HTML i XHTML


 

ComputerSun.pl na FaceBooku
Polecamy lekturę:

Windows 7 PL. Instalacja i naprawa. Ćwiczenia praktyczne



X

Zapisz się na biuletyn serwisu ComputerSun.pl, aby otrzymać poradnik:

Zabezpieczanie sieci bezprzewodowych. Przydatne wskazówki jak chronić sieć domową przed intruzami

Imię:  
Email:
Tak, akceptuję Politykę Prywatności